<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>签到</title>
    <link rel="stylesheet" type="text/css" href="../addons/jy_h5game/resource/xianchang/css/basic.css">	
	<link rel="stylesheet" href="../addons/jy_h5game/resource/xianchang/css/screen_lottory_free.css" type="text/css">
	<link rel="stylesheet" href="../addons/jy_h5game/resource/xianchang/css/spinners.css" type="text/css">
	<script src="../addons/jy_h5game/resource/xianchang/js/tool.js" type="text/javascript" charset="utf-8"></script>
    <style>
	::-webkit-scrollbar-track-piece { 
	background-color: rgba(0,0,0,0);
	border:0;border-radius: 8px; 
	} 
	::-webkit-scrollbar {
	width: 8px; 
	height: 8px; 
	border:0;
	border-radius: 8px; 
	} 
	::-webkit-scrollbar-thumb { 
	background-color: rgba(0,0,0,0); 
	background-clip: padding-box; 
	min-height: 28px; 
	border:0;
	border-radius: 8px;
	} 
	::-webkit-scrollbar-thumb:hover { 
	background-color: rgba(0,0,0,0);
	border:0;
	border-radius: 8px;
	} 
	.member-list {
	height: 70%;
	overflow: scroll;
	} 
	.qiandao{
	background-color: rgba(0, 0, 0, 0.3);
	height: 100%;
	width: 100%;
	overflow: auto; 
	position:relative;
	} 
	.tuchu{
	position: absolute; 
	top: 0; 
	left: 0; 
	bottom:0;
	right:0;
	background-color:rgba(0,0,0,0.75); 
	z-index:2;
	display:none
	} 
		.tuchug {
	border-radius:100%;
	top:50%;
	left:50%;
	margin:-350px 0 0 -350px;
	width:700px;
	height:700px;
	position:absolute;
	z-index:4;
}
.tuchuk {
	background-color:#FFF;
	border-radius:10px;
	top:50%;
	left:50%;
	margin:-200px 0 0 -150px;
	width:300px;
	height:400px;
	position:absolute;
	z-index:4;
}
.tx {
	width:226px;
	height:226px;
	border-radius:100%;
	overflow:hidden;
	margin:40px 37px 15px 37px;
}
.xm {
	font-size:20px;
	color:#000;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
	padding:12px 0;
	text-align:center;
	position:absolute;
	bottom:0;
	margin:0;
	width:100%;
	background-color:rgba(245,245,245,0.57);
	border-radius:0 0 10px 10px;
}
.pm {
	font-size:20px;
	text-align:center;
	background-color:rgba(255,255,255,1);
	color:#000;
	margin:15px auto;
	padding:0;
	border-radius:100px;
	width:75%;
}
.pm .red {
	color:#ff7575;
}
.tuchu.view {
	display:block;
	-webkit-animation:vp 0.5s 8s ease forwards;
	-moz-animation:0.5s 8s ease forwards;
}
.view .tuchuk {
	-webkit-animation:vv 8s 0s ease forwards;
	-moz-animation:8s 0s ease forwards;
}
.view .tuchug {
	-webkit-animation:vg 6.5s 1s ease forwards;
	-moz-animation:6.5s 1s ease forwards;
	opacity:0;
}
@-webkit-keyframes vv {
	0% {
	-webkit-transform:scale(0.1);
	opacity:0;
}
10% {
	-webkit-transform:scale(1.5);
	opacity:1;
}
20% {
	-webkit-transform:scale(1);
	opacity:1;
}
90% {
	-webkit-transform:scale(1);
	opacity:1;
}
100% {
	-webkit-transform:scale(0);
	opacity:0;
}
}@-webkit-keyframes vp {
	0% {
	-webkit-transform:scale(1);
	opacity:1;
}
100% {
	-webkit-transform:scale(1);
	opacity:0;
}
}@-webkit-keyframes vg {
	0% {
	-webkit-transform:rotate(0);
	opacity:0;
}
10% {
	-webkit-transform:rotate(0);
	opacity:1;
}
90% {
	-webkit-transform:rotate(60deg);
	opacity:1;
}
100% {
	-webkit-transform:rotate(70deg);
	opacity:0;
}
}.qiandao ul {
	list-style:none;
	margin:0;
	padding:20px;
	box-sizing:border-box;
	overflow:hidden;
}
.qiandao ul li {
	float:left;
	width:144px;
	height:144px;
	text-align:center;
	position:relative;
	padding:15px 0;
	opacity:0;
	display:none
}
.qiaodaotx {
	width:108px;
	height:108px;
	margin:0 auto;
	border-radius:100%;
	overflow:hidden;
	opacity:0;
	display:none
}
.qiaodaoxm {
	font-size:20px;
	color:#FFF;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
	margin:0 auto;
	padding:10px 0;
	opacity:0;
	display:none
}
.qiaodaopm {
	position:absolute;
	font-size:16px;
	top:105px;
	left:50%;
	background-color:rgba(255,255,255,1);
	color:#000;
	padding:0;
	border-radius:100px;
	width:60px;
	margin:0;
	margin-left:-30px;
	/*box-shadow:0px 1px 5px rgba(0,0,0,0.44);
	*/opacity:0;
	display:none
}
.qiandao ul li.qiaodaosf {
	display:block;
	opacity:1;
}
.qiandao ul li.qiaodaoxs {
	display:block;
	opacity:1;
	-webkit-animation:xs 1s 0s ease forwards;
	-moz-animation:1s 0s ease forwards;
}
.qiaodaosf .qiaodaotx {
	-webkit-animation:f1 1.2s 0.5s ease forwards;
	-moz-animation:2s 0.5s ease forwards;
	display:block
}
.qiaodaosf .qiaodaopm {
	-webkit-animation:mc 1.2s 1.5s ease forwards;
	-moz-animation:2s 1.5s ease forwards;
	display:block
}
.qiaodaosf .qiaodaoxm {
	-webkit-animation:mc 1.2s 2s ease forwards;
	-moz-animation:2s 2s ease forwards;
	display:block
}
.qiandao ul li.showqiaodao {
	display:block;
	opacity:1;
}
.showqiaodao .qiaodaotx {
	opacity:1;
	display:block
}
.showqiaodao .qiaodaopm {
	opacity:1;
	display:block
}
.showqiaodao .qiaodaoxm {
	opacity:1;
	display:block
}
@-webkit-keyframes f1 {
	0% {
	-webkit-transform:scale(0.1);
	opacity:0;
}
70% {
	-webkit-transform:scale(1.5);
	opacity:1;
}
100% {
	-webkit-transform:scale(1);
	opacity:1;
}
}@-webkit-keyframes mc {
	0% {
	opacity:0;
}
100% {
	opacity:1;
}
}@-webkit-keyframes xs {
	0% {
	opacity:1;
	-webkit-transform:scale(1);
}
100% {
	opacity:0;
	-webkit-transform:scale(0);
}
}#ddd {
	
}
</style>
<script src="../addons/jy_h5game/resource/xianchang/js/qdbase.js?20191223" type="text/javascript" charset="utf-8"></script>
<script src="../addons/jy_h5game/resource/xianchang/js/screen_qd.js" type="text/javascript" charset="utf-8"></script>
</head>
<div class="Panel Lottery" style="display: block; opacity: 1;">
      <div class="tuchu">
        <div class="tuchug">
          <img src="../addons/jy_h5game/resource/xianchang/images/icon/bbb.png"></div>
        <div class="tuchuk">
          <img class="tx" id="qdtx" src="{{pagedata.info.headImg}}">
          <p class="pm">第
            <span class="red" id="qdnums">{{pagedata.info.awardinfo}}</span>位签到</p>
          <p class="xm" id="qdname">{{pagedata.info.name}}</p></div>
      </div>
      <div class="qiandao" id="ddd"  >
        <ul id="divDetail">
		
          <li ng-repeat="(k,v) in pagedata.list" class="qiaodaosf" id="dh{{k+1}}">
            <img class="qiaodaotx" id="hd{{k+1}}" src="{{v.headImg}}">
            <p class="qiaodaoxm" id="nc{{k+1}}">			
				{{v.name}}
			</p>
            <p id="qd{{k+1}}" class="qiaodaopm">{{v.awardinfo}}</p>
		  </li>
		
        </ul> 
      </div>
	<link rel="stylesheet" type="text/css" href="../addons/jy_h5game/resource/xianchang/css/footer.css">

   <style>
	body {background: url(../addons/jy_h5game/resource/xianchang/style/all/035d.jpg) #000;background-size: cover;}
   </style>
</div>
<script>
require(['jinyun_socket'],function(jinyun_socket){
    jinyun_socket.connect(function(){
            jinyun_socket.join(scope.pagedata.rid);//加入ID为1的组
     });
	 jinyun_socket.onsystem=function(res){
		$(".tuchu").removeClass('view');
		scope.pagedata.info=JSON.parse(res.message);
		scope.$apply();
       $(".tuchu").addClass('view');
	    var item = '<li id="dh' + scope.pagedata.info.awardinfo + '" class="qiaodaosf" ><img class="qiaodaotx"  id="hd' + scope.pagedata.info.awardinfo + '" src="' + scope.pagedata.info.headImg + '"><p id="nc' + scope.pagedata.info.awardinfo + '" class="qiaodaoxm">' + scope.pagedata.info.name + '</p><p id="qd' + scope.pagedata.info.awardinfo + '" class="qiaodaopm">' + scope.pagedata.info.awardinfo + '</p></li>';       
	   $('#divDetail').append(item);
        var div = document.getElementById('divDetail');
        document.getElementById('ddd').scrollTop = div.scrollHeight;
    }
});
</script>
